import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Query } from 'react-apollo'
import { BasicButton } from 'components/Button'
import GetTasks from 'graphql/project/task/myLableTask.graphql'
import { global as globalDuck } from 'ducks'
import {
  Grid, Segment, Header, Icon,
} from 'semantic-ui-react'
import { PaddingContainer } from 'components/containers'
import { LABEL_ADDRESS } from 'env'
import PieChart from './taskChart'

class ProjectWork extends Component {
  componentDidMount() {
    const { setParentActiveItem } = this.props
    setParentActiveItem('work')
  }

  render() {
    const { project, user } = this.props
    const { projectId } = project
    return (
      <Query query={GetTasks} variables={{ projectId, uid: user.id }}>
        {({ data, loading, error }) => {
          if (loading) return 'Loading...'
          if (error) return `Error! ${error.message}`
          let hasData = true
          if (data && data.user_task_count_view.length === 0) {
            hasData = false
          } else if (data.user_task_count_view[0].in_progress + data.user_task_count_view[0].done === 0) hasData = false
          return (
            <PaddingContainer>
              {!hasData && (
                <Segment placeholder>
                  <Header icon>
                    <Icon name="box outline" />
                    当前项目下没有属于你的标注任务
                  </Header>
                </Segment>
              )}
              {hasData && (
                <Grid>
                  <Grid.Row>
                    <Grid.Column>
                      <BasicButton
                        onClick={() => {
                          const win = window.open(`${LABEL_ADDRESS}/label/${projectId}`, '_blank')
                          win.focus()
                        }}
                      >
                        开始标注
                      </BasicButton>
                    </Grid.Column>
                  </Grid.Row>
                  <Grid.Row>
                    <Grid.Column>
                      <PieChart
                        data={[
                          {
                            name: '已完成',
                            value: parseInt(data.user_task_count_view[0].done, 10),
                            v: 89,
                          },
                          {
                            name: '未完成',
                            value: parseInt(data.user_task_count_view[0].in_progress, 10),
                            v: 100,
                          },
                          { name: '返工', value: 0, v: 200 },
                        ]}
                      />
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              )}
            </PaddingContainer>
          )
        }}
      </Query>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

export default connect(
  mapStateToProps,
  null,
)(ProjectWork)
